<template>
	<view class="content" @touchmove.stop.prevent="moveHandle">
		<view class="nav">
			<view class="nav_icon" style="left: 0;" @click="back">
				<image src="../../static/editImg/return.png" style="width: 48rpx;height: 76rpx;"></image>
			</view>
			STORE
			<view class="nav_icon" style="right: 0;">
				<image src="../../static/store/gold.png" style="width: 67rpx;height: 72rpx;"></image>
				<text style="margin-top: 8rpx;">{{num}}</text>
			</view>
		</view>
		<view class="goldList">
			<view class="goldList-Tip">
				<image src="../../static/store/storeTop.png" style="height: 100%;" mode="heightFix"></image>
				<view class="goldList_title">
					<view>Enjoy All</view>
					<view>Hidden</view>
					<view>Features</view>
				</view>
			</view>
			<view class="buyIcon">
				<view v-for="(item, index) in 4" :key="index" >
					<view class="buyItem" @click="gotoBuy(index)">
						<view class="buyCon">
							<image src="../../static/store/gold.png" style="width: 97rpx;height: 97rpx;"></image>
							<view class="buyTitle">COINS <image src="../../static/store/close2.png" style="width: 38rpx;height: 38rpx;" /> {{ coinList[index].num }}</view>
							<view class="buyMoney">${{ coinList[index].money }}</view>
						</view>
						<view class="buy">BUY</view>
					</view>
				</view>
			</view>
<!-- 			<image src="../../static/store/storeBG.png" style=" position: absolute;width: 100%;height: 1182rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);"></image>
			<view class="buyGold">
				<view v-for="(item, index) in 5" :key="index" class="goldItem">
					<view class="buyItem" @click="gotoBuy(index)">
						<view class="buyCon">
							<image src="../../static/store/gold.png" style="width: 100rpx;height: 108rpx;"></image>
							<view class="buyTitle">COINS <image src="../../static/store/close2.png" style="width: 38rpx;height: 38rpx;" /> {{ coinList[index] }}</view>
						</view>
						<view class="buy">B <br />U<br />Y</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import Base64 from 'base-64';
	export default {
		data() {
			return {
				coinList :[{num: 20, money: 1.99 },{num: 50, money: 2.99 },{num: 100, money: 4.99 },{num: 200, money: 9.99 }],
				num: 0,
				isPay: false
			}
		},
		onLoad() {
		},
		onShow() {
			this.num = uni.getStorageSync('PicEditIcon') || 0
		},
		methods: {
			moveHandle() {},
			back() {
				uni.navigateBack()
			},
			gotoBuy(index) {
				if (this.isPay) return
				this.isPay = true
				uni.showLoading({
					title: 'loading...',
					mask: true
				})
				 window['iap'] = (data) => {
				        let res;
				        try {
				            const decodedString = Base64.decode(data);
				            res = JSON.parse(decodedString);
							console.log(res);
				        } catch (error) {
				            res = data;
				        }
				        if (res !== null && typeof res === 'object') {
				            let num = res.productIdentifier.replace(/\D/g, ''); // 匹配第一个连续的数字
							this.num = this.num + Number(num)
							uni.setStorageSync( 'PicEditIcon', this.num)
							this.isPay = false
							uni.hideLoading()
				        } else {
							
							uni.showToast({
								title: 'Payment failed!',
								icon: 'none'
							})
							uni.hideLoading()
							this.isPay = false
				        }
				        // 支付成功 return0结束
				        return 0;
				    }
				    window['send'](`terms://buy?product=com.picmore.edit.${this.coinList[index].num}coins&num=1`);
			}
		}
	}
</script>

<style scoped>
	@import url('../../static/fontFamily/stylesheet.css');
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient( 180deg, #010101 0%, #3C2EC7 100%);
		box-sizing: border-box;
		font-family: BungeeRegular;
		color: #FFFFFF;
		overflow: hidden;
	}
	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100vw;
		height: 116rpx;
		background: #FFFFFF;
		border: 12rpx solid #000000;
		text-align: center;
		position: relative;
		box-sizing: border-box;
		margin-top: 116rpx;
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 66rpx;
		color: #0E0B2C;
	}
	.nav_icon {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background: #FFFFFF;
		border: 12rpx solid #000000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
	}
	.goldList {
		margin-top: 146rpx;
		width: 100vw;
		min-height: 1182rpx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.buyGold {
		display: flex;
		flex-direction: column;
		z-index: 6;
	}
	.goldItem {
		/* display: flex; */
		margin-bottom: 40rpx;
	}
	.buyItem {
		z-index: 9;
		width: 256rpx;
		/* height: 196rpx; */
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #000000;
		display: flex;
		flex-direction: column;
		
		margin-bottom: 40rpx;
	}
	.buy {
		width: 100%;
		height: 62rpx;
		background-color: #000000;
		color: #FFFFFF;
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 54rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.buyCon {
		/* flex: 1; */
		width: 100%;
		height: 226rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.buyTitle {
		/* font-family: Bungee, Bungee; */
		font-weight: 400;
		font-size: 32rpx;
		color: #FFA70A;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.goldList-Tip {
		display: flex;
		width: 588rpx;
		height: 268rpx;
		background: #18A9A5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 14rpx solid #000000;
	}
	.goldList_title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.buyIcon {
		width: 616rpx;
		margin-top: 116rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.buyMoney {
		margin-top: 14rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #000000;
	}
</style>